<template>
  <div>
    <div
      class="pc"
      v-if="!$isMobile"
    >
      <div class="head-btn">
        <div class="g-con box">
          <!-- <el-button> working condition：be on the job</el-button> -->
          <el-button
            v-if="!isViewResume"
            type="primary"
            @click="alertMsg"
          >
            {{ t('crew.b1_2') }}
          </el-button>
          <el-button
            @click="handleDownload"
            type="primary"
          >
            {{ t('crew.b1_3') }}
          </el-button>
          <el-button
            v-if="isViewResume"
            type="primary"
            @click="handelSendMsg"
          >
            {{ t('crew.b1_1') }}
          </el-button>
          <el-button
            type="primary"
            v-if="detailInfo.isCollect == 0"
            @click="collectFn"
          >
            {{ t('crew.b1') }}
          </el-button>
          <el-button
            v-if="detailInfo.isCollect > 0"
            class="cancel-btn"
            @click="cancelCollectFn"
          >
            {{ t('crew.b2') }}
          </el-button>
        </div>
      </div>
      <div class="body">
        <div class="g-con container">
          <el-card class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <span class="ft-2">{{ t('crew.t1') }}</span>
            </div>
            <div class="content">
              <div :class="['head-sculpture', { hide: !isViewResume }]">
                <img :src="detailInfo.headSculpture" />
              </div>
              <div class="user-info">
                <div class="name">
                  {{ detailInfo.crewName }}
                  <div>
                    {{ getDictLabel('resume_work_status', detailInfo.crewStatus) }}
                  </div>
                </div>
                <el-descriptions :column="2">
                  <el-descriptions-item :label="`${t('crew.u1')}`">
                    {{ detailInfo.crewLocation }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u2')}`">
                    {{ detailInfo.passportNumber }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u3')}`">
                    {{ getDictLabel('duties', detailInfo.duties) }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u4')}`">
                    {{ detailInfo.seamanBookNumber }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u5')}`">
                    {{ getDictLabel('ships_type', detailInfo.shippingType) }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u6')}`">
                    {{ detailInfo.graduateSchool }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u7')}`">
                    {{ isViewResume ? dateFormat(detailInfo.nextSignOnDate, 3) : '***' }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u8')}`">
                    {{ detailInfo.telephone }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u9')}`">
                    {{ dateFormat(detailInfo.birthDate, 3) }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u10')}`">
                    {{ detailInfo.email }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u11')}`">
                    {{ getDictLabel('english_level', detailInfo.englishLevel) }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-card>
          <el-card class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <span class="ft-2">{{ t('crew.t2') }}</span>
            </div>
            <div :class="['doc-information', { hide: !isViewResume }]">
              <div>
                <img
                  :src="detailInfo.seamanBook"
                  alt=""
                />
                <p>{{ t('crew.c1') }}</p>
              </div>
              <div>
                <img
                  :src="detailInfo.serviceBook"
                  alt=""
                />
                <p>{{ t('crew.c2') }}</p>
              </div>
            </div>
          </el-card>
          <el-card class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <span class="ft-2">{{ t('crew.t3') }}</span>
            </div>
            <el-table
              :data="cardTable"
              border
              style="width: 100%"
              header-cell-class-name="table_header"
            >
              <el-table-column
                prop="certificateType"
                :label="`${t('crew.l1')}`"
              >
                <template #default="scope">
                  {{ getDictLabel('certificate_type', detailInfo.certificateType) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="certificateNumber"
                :label="`${t('crew.l2')}`"
              >
              </el-table-column>
              <el-table-column
                prop="periodOfValidity"
                :label="`${t('crew.l3')}`"
              >
                <template #default="scope">
                  {{ dateFormat(scope.row.periodOfValidity, 3) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="competentAuthority"
                :label="`${t('crew.l4')}`"
              >
              </el-table-column>
              <el-table-column
                prop="placeOfIssuance"
                :label="`${t('crew.l5')}`"
              >
              </el-table-column>
            </el-table>
          </el-card>
          <el-card class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <span class="ft-2">{{ t('crew.t4') }}</span>
            </div>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              header-cell-class-name="table_header"
            >
              <el-table-column
                prop="duties"
                :label="`${t('crew.l6')}`"
              >
                <template #default="scope">
                  {{ getDictLabel('duties', detailInfo.duties) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="shippingType"
                :label="`${t('crew.l7')}`"
              >
                <template #default="scope">
                  {{ getDictLabel('ships_type', detailInfo.shippingType) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="monthlyPay"
                :label="`${t('crew.l8')}`"
              >
                <template #default="scope">
                  {{detailInfo.monthlyPay}}
                  {{ getDictLabel('currency', detailInfo.currency) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="servicePeriodMonth"
                :label="`${t('crew.l9')}`"
              >
              </el-table-column>
            </el-table>
          </el-card>
          <el-card class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <span class="ft-2">{{ t('crew.t5') }}</span>
            </div>
            <el-table
              :data="detailInfo.shcwCrewExperiences"
              border
              style="width: 100%"
              header-cell-class-name="table_header"
            >
              <el-table-column
                prop="startServiceTime"
                :label="`${t('crew.l10')}`"
                width="200px"
              >
                <template #default="scope"> {{ dateFormat(scope.row.startServiceTime, 3) }} ~ {{ dateFormat(scope.row.endServiceTime, 3) }} </template>
              </el-table-column>
              <el-table-column
                prop="duties"
                :label="`${t('crew.l19')}`"
              >
                <template #default="scope">
                  {{ getDictLabel('duties', detailInfo.duties) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="shipName"
                :label="`${t('crew.l11')}`"
              >
              </el-table-column>
              <el-table-column
                prop="shipFlag"
                :label="`${t('crew.l12')}`"
              >
              </el-table-column>
              <el-table-column
                prop="monthlyPay"
                :label="`${t('crew.l18')}`"
              >
                <template #default="scope">
                  {{ getDictLabel('ships_type', detailInfo.shippingType) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="deadweightTon"
                :label="`${t('crew.l13')}`"
              >
              </el-table-column>
              <el-table-column
                prop="hostModel"
                :label="`${t('crew.l14')}`"
              >
              </el-table-column>
              <el-table-column
                prop="horsepower"
                :label="`${t('crew.l15')}`"
              >
              </el-table-column>
              <!-- <el-table-column
                prop="power"
                :label="`${t('crew.l16')}`"
              >
              </el-table-column>
              <el-table-column
                prop="grossTon"
                :label="`${t('crew.l17')}`"
              >
              </el-table-column> -->
              <el-table-column
                prop="corporateName"
                :label="`${t('crew.l20')}`"
              >
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
    </div>
    <div v-if="$isMobile">
      <mCrewResume />
    </div>

    <!-- 提示 -->
    <Confirm
      v-if="msgDialog"
      :visible="msgDialog"
      :title="t('crew.m3')"
      hide-footer
      @close="msgDialog = false"
    >
      <div class="flexcc-col">
        <div class="mt-3">{{ t('crew.m1') }}</div>
        <el-button
          class="mt-3"
          type="primary"
          color="#252628"
          style="width: 300px"
          @click="openUrl('/organizationStructure', {tab: 2})"
        >
          {{ t('crew.m2') }}
        </el-button>
      </div>
    </Confirm>
  </div>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance, watch } from 'vue'
import { getCrewResume, resumeCollect, cancelFavorite, crewResumeDownloadApi } from '@/service/crew.js'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { uploads } from '@/service/common.js'
import { dateFormat, download, openUrl } from '@/utils/index'
import useDict from '@/hooks/useDict'
import mCrewResume from './mCrewResume.vue'
import useLogin from '@/stores/login'
import useDialogue from '@/stores/dialogue'
import { getOrganization } from '@/service/organizationStructure'

import Confirm from '@/components/Confirm.vue'

const storeDialogue = useDialogue()
const { setDialogVisible, setActivePerson } = storeDialogue

const storeLogin = useLogin()
const isViewResume = ref(false)

// 企业信息
const getOrganizationInfoFn = () => {
  if (!storeLogin?.userInfo?.enterpriseId) return
  getOrganization(storeLogin.userInfo.enterpriseId).then(({ data }) => {
    isViewResume.value = data.viewResumeFlag === '1'
  })
}

onMounted(() => {
  init()
})

const { $isMobile } = getCurrentInstance().appContext.config.globalProperties
const { dictData, getDictData, getDictLabel } = useDict()
const emit = defineEmits(['update:CrewResumeVis'])

const { t, locale } = useI18n()

watch(locale, () => {
  init()
})

const router = useRouter()
const route = useRoute()
const detailInfo = ref({})
const cardTable = ref([])
const tableData = ref([])
const props = defineProps({
  CrewResumeVis: {
    type: Boolean,
    default: false
  }
})
// const closeDialog = () => {
//     emit('update:CrewResumeVis', false)
// }

const msgDialog = ref(false)
const alertMsg = () => {
  // ElMessage.warning(t('crew.m1'))
  msgDialog.value = true
}

// 下载简历
const handleDownload = () => {
  if (!isViewResume.value) {
    alertMsg()
    return
  }
  crewResumeDownloadApi(route.query.id).then((res) => {
    download(res)
  })
}

// 在线联系
const handelSendMsg = () => {
  if (!isViewResume.value) {
    alertMsg()
    return
  }
  setDialogVisible(true)
  setActivePerson({
    customerName: detailInfo.value.crewName,
    customerId: detailInfo.value.createBy
  })
}

// 收藏
const collectFn = () => {
  if (!isViewResume.value) {
    alertMsg()
    return
  }
  let data = {
    crewResumeId: route.query.id,
    customerId: JSON.parse(localStorage.getItem('login')).userInfo.id
  }
  resumeCollect(data).then((res) => {
    // ElMessage({
    //   message: '收藏成功',
    //   type: 'success'
    // })
    getInfo()
  })
}
// 取消收藏
const cancelCollectFn = () => {
  let data = {
    crewResumeId: route.query.id,
    customerId: JSON.parse(localStorage.getItem('login')).userInfo.id
  }
  cancelFavorite(data).then((res) => {
    // ElMessage({
    //   message: '取消成功',
    //   type: 'success'
    // })
    getInfo()
  })
}

const getInfo = () => {
  getCrewResume(route.query.id).then(({ data }) => {
    if (!isViewResume.value) {
      data.crewName = `*${data.crewName.substr(1)}`
      data.passportNumber = `***`
      data.seamanBookNumber = `***`
      data.telephone = `***`
      data.email = `***`
      data.certificateNumber = `***`
      data.monthlyPay = `***`

      data.shcwCrewExperiences.forEach((item) => {
        item.shipName = '***'
      })
    }

    detailInfo.value = data
    cardTable.value = [
      {
        certificateType: data.certificateType,
        certificateNumber: data.certificateNumber,
        periodOfValidity: data.periodOfValidity,
        competentAuthority: data.competentAuthority,
        placeOfIssuance: data.placeOfIssuance
      }
    ]
    tableData.value = [
      {
        duties: data.duties,
        shippingType: data.shippingType,
        monthlyPay: data.monthlyPay,
        servicePeriodMonth: data.servicePeriodMonth
      }
    ]
  })
}

const init = async () => {
  if ($isMobile) return
  // getCrewResume(route.query.id).then((res) => {
  //     detailInfo.value = res.data
  //     cardTable.value=[
  //         {
  //             certificateType:res.data.certificateType,
  //             certificateNumber:res.data.certificateNumber,
  //             periodOfValidity:res.data.periodOfValidity,
  //             competentAuthority:res.data.competentAuthority,
  //             placeOfIssuance:res.data.placeOfIssuance,
  //         }
  //     ]
  //     tableData.value=[
  //         {
  //             duties:res.data.duties,
  //             shippingType:res.data.shippingType,
  //             monthlyPay:res.data.monthlyPay,
  //             servicePeriodMonth:res.data.servicePeriodMonth,
  //         }
  //     ]
  // })
  await getOrganizationInfoFn()
  getInfo()
  getDictData('resume_work_status')
  getDictData('currency')
  getDictData('duties')
  getDictData('ships_type')
  getDictData('english_level')
  getDictData('certificate_type')
}
</script>
<style scoped lang="scss">
.pc {
  .container {
    .doc-information {
      display: flex;
      margin-top: 20px;
      padding-left: 20px;

      div {
        margin-right: 30px;

        img {
          width: 84px;
          height: 84px;
        }

        p {
          text-align: center;
          padding-top: 8px;
        }
      }

      &.hide {
        div {
          background: #ccc;
          width: 120px;
          height: 120px;
          img {
            display: none;
          }
          p {
            margin-top: 40%;
          }
        }
      }
    }
  }

  .head-btn {
    width: 100%;
    height: 110px;

    .box {
      border-top: 2px solid black;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      padding-top: 30px;

      .el-button {
        min-width: 140px;
      }

      .cancel-btn {
        background: rgba(235, 235, 235, 1);
        border: 1px solid rgba(235, 235, 235, 1);
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ca2a02;
      }
    }
  }

  .body {
    width: 100%;
    background: rgba(245, 245, 245, 1);
    margin-bottom: -76px;
    padding-bottom: 30px;
    padding-top: 30px;

    .title {
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ca2a02;
      border-bottom: 2px solid black;
      line-height: 50px;
    }

    :deep(.table_header) {
      height: 50px;
      background: #f0f3f8;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #252628;
      border: rgba(235, 235, 235, 1) 1px solid;
    }

    .content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding-top: 50px;
      padding-left: 38px;
      padding-bottom: 44px;

      .head-sculpture {
        width: 162px;
        height: 162px;
        margin-right: 30px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }

        &.hide {
          img {
            display: none;
          }
          background: #ccc;
          border-radius: 50%;
        }
      }

      .user-info {
        flex: 1;
        display: flex;
        flex-direction: column;

        .name {
          width: 100%;
          display: flex;
          font-size: 24px;
          font-family: Source Han Sans CN;
          font-weight: 800;
          color: #252628;
          line-height: 22px;
          margin-bottom: 20px;

          div {
            min-width: 40px;
            height: 24px;
            background: rgba(202, 42, 2, 0.1);
            border-radius: 2px;
            margin-left: 12px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ca2a02;
            padding: 0 8px;
          }
        }

        :deep(.el-descriptions__label) {
          min-width: 80px;
          color: rgba(157, 159, 165, 1) !important;
          font-size: 12px;
          text-align: left;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 28px;
          display: inline-block;
        }

        :deep(.el-descriptions__content) {
          color: black;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 28px;
        }
      }
    }
  }
}
</style>
